<template>
  <div>
    <div style="display: flex; justify-content: flex-start;margin: 10px">
      <a-button type="primary" @click="add(null)">新增广告</a-button>
      <a-button
        type="primary"
        icon="search"
        @click="search()"
        style="margin:0 10px"
        >筛选</a-button
      >
    </div>
    <a-table
      bordered
      style="padding-top: 10px"
      :rowSelection="rowSelection"
      :columns="columns"
      :dataSource="dataTable"
      :rowKey="(record, index) => record.posterId"
      :pagination="pagination"
      @change="handleTableChange"
    >
      <template slot="operation" slot-scope="text, row">
        <a-button size="small" type="primary" @click="add(row)">编辑</a-button>
        <a-button size="small" type="primary" @click="checkDdetail(row)"
          >详情</a-button
        >
        <a-popconfirm
          title="你确定更要删除吗?"
          @confirm="delPlan(row)"
          @cancel="cancel"
          okText="确定"
          cancelText="取消"
        >
          <a-button size="small" type="danger">删除</a-button>
        </a-popconfirm>
      </template>
    </a-table>

    <!-- 弹框 -->
    <a-modal
      title="新增广告"
      :width="900"
      :visible="visibleAdd"
      @cancel="visibleAdd = false"
      :confirm-loading="confirmLoading"
      cancelText="取消"
      okText="提交"
      @ok="save"
    >
      <a-form :form="formData">
        <a-form-item
          label="广告名称"
          :label-col="{ span: 5 }"
          :wrapper-col="{ span: 12 }"
        >
          <a-input
            placeholder="请输入广告名称"
            v-decorator="[
              'posterName',
              {
                initialValue: posterName,
                rules: [
                  {
                    type: 'string',
                    required: false,
                    message: '请输入广告名称'
                  }
                ]
              }
            ]"
          />
        </a-form-item>
        <a-form-item
          label="广告备注"
          :label-col="{ span: 5 }"
          :wrapper-col="{ span: 12 }"
        >
          <a-input
            placeholder="广告备注"
            v-decorator="[
              'remark',
              {
                initialValue: remark,
                rules: [
                  {
                    type: 'string',
                    required: false,
                    message: '请输入广告备注'
                  }
                ]
              }
            ]"
          />
        </a-form-item>
        <a-form-item
          label="所属页面"
          :label-col="{ span: 5 }"
          :wrapper-col="{ span: 12 }"
        >
          <a-select
            style="width: 200px"
            @change="changPosterType"
            v-decorator="[
              'posterType',
              {
                initialValue: posterType
              }
            ]"
            placeholder="所属页面"
          >
            <a-select-option
              :key="i.posterType"
              v-for="i in posterTypeList"
              :value="i.posterType"
            >
              {{ i.name }}</a-select-option
            >
          </a-select>
        </a-form-item>
        <div v-if="this.isArticle != 0">
          <a-form-item
            label="模块分类"
            :label-col="{ span: 5 }"
            :wrapper-col="{ span: 12 }"
          >
            <a-select
              style="width: 200px"
              v-decorator="[
                'categoryType',
                {
                  initialValue: categoryType
                }
              ]"
              placeholder="模块分类"
            >
              <a-select-option
                :key="i.categoryType"
                v-for="i in categoryTypeList"
                :value="i.categoryType"
              >
                {{ i.name }}</a-select-option
              >
            </a-select>
          </a-form-item>
        </div>
        <div v-if="this.isTraffic != 0">
          <a-form-item
            label="交通分类"
            :label-col="{ span: 5 }"
            :wrapper-col="{ span: 12 }"
          >
            <a-select
              style="width: 200px"
              v-decorator="[
                'trafficType',
                {
                  initialValue: trafficType
                }
              ]"
              placeholder="交通分类"
            >
              <a-select-option
                :key="i.trafficType"
                v-for="i in trafficTypeList"
                :value="i.trafficType"
              >
                {{ i.name }}</a-select-option
              >
            </a-select>
          </a-form-item>
        </div>
        <a-form-item
          label="语言"
          :label-col="{ span: 5 }"
          :wrapper-col="{ span: 12 }"
        >
          <a-select
            style="width: 200px"
            v-decorator="[
              'language',
              {
                initialValue: language
              }
            ]"
            placeholder="语言"
          >
            <a-select-option
              :key="i.language"
              v-for="i in languageList"
              :value="i.language"
            >
              {{ i.name }}</a-select-option
            >
          </a-select>
        </a-form-item>
        <a-form-item
          label="展示形式"
          :label-col="{ span: 5 }"
          :wrapper-col="{ span: 12 }"
        >
          <a-select
            style="width: 200px"
            @change="changType"
            v-decorator="[
              'showType',
              {
                initialValue: showType
              }
            ]"
            placeholder="展示形式"
          >
            <a-select-option
              :key="i.showType"
              v-for="i in showTypeList"
              :value="i.showType"
            >
              {{ i.name }}</a-select-option
            >
          </a-select>
        </a-form-item>
        <div v-if="this.key == 1">
          <a-form-item
            label="广告图片"
            :label-col="{ span: 5 }"
            :wrapper-col="{ span: 12 }"
          >
            <a-upload
              name="avatar"
              list-type="picture-card"
              class="avatar-uploader"
              :fileList="fileList"
              :multiple="false"
              :before-upload="beforeUpload"
              :remove="handleRemoveImg"
              @preview="previewImages"
              v-decorator="[
                'fileList',
                {
                  initialValue: fileList,
                  rules: [{ required: false, message: '请选择广告图片' }]
                }
              ]"
            >
              <div v-if="fileList.length == 0">
                <a-icon :type="loading ? 'loading' : 'plus'" />
                <div class="ant-upload-text">图片上传</div>
              </div>
            </a-upload>
          </a-form-item>
          <a-form-item
            label="广告链接"
            :label-col="{ span: 5 }"
            :wrapper-col="{ span: 12 }"
          >
            <a-input
              placeholder="请输入广告链接"
              v-decorator="[
                'link',
                {
                  initialValue: link,
                  rules: [
                    {
                      type: 'string',
                      required: false,
                      message: '广告链接'
                    }
                  ]
                }
              ]"
            />
          </a-form-item>
        </div>
        <div v-else>
          <a-form-item
            label="上传视频"
            :label-col="{ span: 5 }"
            :wrapper-col="{ span: 12 }"
          >
            <a-upload
              name="file"
              :multiple="false"
              :customRequest="handleChange"
              :before-remove="handleRemove"
              :showUploadList="false"
            >
              <a-button> <a-icon type="upload" />上传视频 </a-button></a-upload
            >
          </a-form-item>
        </div>
      </a-form>
    </a-modal>

    <!-- 详情弹窗 -->
    <a-modal
      :width="1000"
      :visible="visibleDetail"
      @cancel="visibleDetail = false"
      cancelText="取消"
      @ok="detailSave"
      :footer="null"
      title="广告详情"
    >
      <a-form class="deView" layout="inline" :form="formData">
        <!-- 广告名称 -->
        <div>
          <a-form-item class="deItem" label="广告名称">
            {{ posterName }}
          </a-form-item>
        </div>
        <!-- 所属页面 -->
        <div>
          <a-form-item class="deItem" label="所属页面" v-if="posterType == 1">
            首页轮播图
          </a-form-item>
          <a-form-item class="deItem" label="所属页面" v-if="posterType == 2">
            首页弹窗
          </a-form-item>
          <a-form-item class="deItem" label="所属页面" v-if="posterType == 4">
            文章列表页
          </a-form-item>
          <a-form-item class="deItem" label="所属页面" v-if="posterType == 8">
            跨境交通
          </a-form-item>
        </div>
        <!-- 所属模块 -->
        <div>
          <a-form-item class="deItem" label="模块分类" v-if="categoryType == 1">
            大湾区概览
          </a-form-item>
          <a-form-item class="deItem" label="模块分类" v-if="categoryType == 2">
            政策
          </a-form-item>
          <a-form-item class="deItem" label="模块分类" v-if="categoryType == 3">
            资助及优惠
          </a-form-item>
          <a-form-item class="deItem" label="模块分类" v-if="categoryType == 4">
            对接及联络
          </a-form-item>
          <a-form-item class="deItem" label="模块分类" v-if="categoryType == 5">
            商务支援
          </a-form-item>
          <a-form-item class="deItem" label="模块分类" v-if="categoryType == 6">
            商务支援
          </a-form-item>
          <a-form-item class="deItem" label="模块分类" v-if="categoryType == 7">
            香港贸发局
          </a-form-item>
          <a-form-item class="deItem" label="模块分类" v-if="trafficType == 1">
            航班查询
          </a-form-item>
          <a-form-item class="deItem" label="模块分类" v-if="trafficType == 2">
            铁路查询
          </a-form-item>
          <a-form-item class="deItem" label="模块分类" v-if="trafficType == 3">
            船期查询
          </a-form-item>
          <a-form-item class="deItem" label="模块分类" v-if="trafficType == 4">
            巴士查询
          </a-form-item>
          <a-form-item class="deItem" label="模块分类" v-if="trafficType == 5">
            口岸查询
          </a-form-item>
        </div>
        <!-- 展示形式 -->
        <div>
          <a-form-item class="deItem" label="展示形式" v-if="showType == 1">
            图片
          </a-form-item>
          <a-form-item class="deItem" label="展示形式" v-if="showType == 2">
            视频
          </a-form-item>
        </div>
        <div>
          <a-form-item class="deItem" label="语言" v-if="language == 1">
            简体中文
          </a-form-item>
          <a-form-item class="deItem" label="语言" v-if="language == 2">
            繁体中文
          </a-form-item>
          <a-form-item class="deItem" label="语言" v-if="language == 3">
            英文
          </a-form-item>
        </div>
        <!-- 图片 -->
        <div v-if="showType == 1">
          <div>
            <a-form-item class="deItem" label="广告链接">
              {{ link }}
            </a-form-item>
          </div>
          <div>
            <a-form-item class="deItem" label="图片">
              <div
                style="
          padding-left: 10px;
          display: flex;
          flex-direction: column;
          font-size: 16px;
          font-weight: 600;
        "
              >
                <img
                  style="width: 150px;height: 140px;margin:10px; 0"
                  :src="imageUrl"
                  v-if="showType == 1"
                  alt=""
                />
              </div>
            </a-form-item>
          </div>
        </div>
        <div>
          <a-form-item class="deItem" label="视频" v-if="showType == 2">
            <div style="width: 450px" :class="videoUrl == '' ? 'active' : ''">
              <a-upload
                name="file"
                :multiple="false"
                :customRequest="handleChange"
                :showUploadList="false"
              >
              </a-upload>
              <video
                width="100%"
                height="100%"
                :src="videoUrl"
                autoplay
                controls
              ></video>
            </div>
          </a-form-item>
        </div>
      </a-form>
    </a-modal>

    <!-- 弹框 筛选   -->
    <a-modal
      title="筛选数据"
      :visible="visibleSearch"
      cancelText="关闭"
      okText="筛选"
      @ok="handleSearch"
      @cancel="visibleSearch = false"
    >
      <div>
        <a-form>
          <a-form-item
            label="语言"
            :label-col="{ span: 5 }"
            :wrapper-col="{ span: 12 }"
          >
            <a-select
              style="width: 200px"
              placeholder="语言"
              v-model="filterOutObj.language"
            >
              <a-select-option value=""> 全部</a-select-option>
              <a-select-option
                :key="i.language"
                v-for="i in languageList"
                :value="i.language"
              >
                {{ i.name }}</a-select-option
              >
            </a-select>
          </a-form-item>
          <a-form-item
            label="广告名称"
            :label-col="{ span: 5 }"
            :wrapper-col="{ span: 12 }"
          >
            <a-input
              v-model="filterOutObj.posterName"
              placeholder="请输入广告名称"
            ></a-input>
          </a-form-item>
          <a-form-item
            label="所属页面"
            :label-col="{ span: 5 }"
            :wrapper-col="{ span: 12 }"
          >
            <a-select
              style="width: 200px"
              placeholder="所属页面"
              @change="changPosterType"
              v-model="filterOutObj.posterType"
            >
              <a-select-option value=""> 全部</a-select-option>
              <a-select-option
                :key="i.posterType"
                v-for="i in posterTypeList"
                :value="i.posterType"
              >
                {{ i.name }}</a-select-option
              >
            </a-select>
          </a-form-item>
          <div v-if="this.isArticle != 0">
            <a-form-item
              label="模块分类"
              :label-col="{ span: 5 }"
              :wrapper-col="{ span: 12 }"
            >
              <a-select
                style="width: 200px"
                placeholder="模块分类"
                v-model="filterOutObj.categoryType"
              >
                <a-select-option value=""> 全部</a-select-option>
                <a-select-option
                  :key="i.categoryType"
                  v-for="i in categoryTypeList"
                  :value="i.categoryType"
                >
                  {{ i.name }}</a-select-option
                >
              </a-select>
            </a-form-item>
          </div>
        </a-form>
      </div>
    </a-modal>
  </div>
</template>
<script>
import api from "@/api/api.js";
var rowKeys = [];
const rowSelection = {
  onChange: (selectedRowKeys, selectedRows) => {
    rowKeys = selectedRows;
  }
};
// import tinymce from "@/components/tinymce";
export default {
  inject: ["reload"],
  // components:{
  //     quillEditor
  // },
  data() {
    return {
      posterId: "",
      posterName: "",
      remark: "",
      link: "",
      posterType: "",
      categoryType: "",
      trafficType: "",
      showType: "",
      pic: "",
      url: "",
      language: "",
      radioType: 2,
      key: "",
      isArticle: 0,
      isTraffic: 0,
      imageUrl: "",
      videoUrl: "",
      test: "",
      loading: false,
      showHOST: api.showHOST,
      showPhoto: false,
      visibleAdd: false,
      visibleDetail: false,
      confirmLoading: false,
      previewVisible: false,
      visibleSearch: false,
      previewImage: "",
      dataTable: [],
      fileList: [],
      columns: [
        {
          title: "广告名称",
          dataIndex: "posterName",
          align: "center"
        },
        {
          title: "所属页面",
          dataIndex: "posterType",
          align: "center",
          customRender: function(text) {
            if (text == "1") {
              return "首页轮播图";
            } else if (text == "2") {
              return "首页弹窗";
            } else if (text == "4") {
              return "文章列表页";
            } else if (text == "8") {
              return "跨境交通";
            }
          }
        },
        {
          title: "模块分类",
          dataIndex: "type",
          align: "center"
        },
        {
          title: "展示形式",
          dataIndex: "showType",
          align: "center",
          customRender: function(text) {
            if (text == "1") {
              return "图片";
            } else if (text == "2") {
              return "视频";
            }
          }
        },
        {
          title: "语言",
          dataIndex: "language",
          align: "center",
          customRender: function(text) {
            if (text == "1") {
              return "简体中文";
            } else if (text == "2") {
              return "繁体";
            } else if (text == "3") {
              return "英语";
            }
          }
        },
        {
          title: "操作",
          dataIndex: "operation",
          width: "300px",
          align: "center",
          scopedSlots: { customRender: "operation" }
        }
      ],
      rowSelection: {
        hideDefaultSelections: true
      },
      form: {
        size: 10, //每页条数
        page: 1, // 起始页
        language: "",
        posterName: "",
        posterType: "",
        showType: "",
        categoryType: "",
        trafficType: ""
      },
      filterOutObj: {
        language: "",
        posterName: "",
        posterType: "",
        showType: "",
        categoryType: "",
        trafficType: ""
      },
      pagination: {
        pageSize: 10,
        total: 0,
        current: 1
      },
      totalPage: 0,
      formData: this.$form.createForm(this),
      // formData2: this.$form.createForm(this),

      posterTypeList: [
        { posterType: 1, name: "首页轮播图" },
        { posterType: 2, name: "首页弹窗" },
        { posterType: 4, name: "文章列表页" },
        { posterType: 8, name: "跨境交通" }
      ],
      languageList: [
        { language: 1, name: "简体中文" },
        { language: 2, name: "繁体中文" },
        { language: 3, name: "英文" }
      ],
      showTypeList: [
        { showType: 1, name: "图片" },
        { showType: 2, name: "视频" }
      ],
      categoryTypeList: [
        { categoryType: "1", name: "大湾区概览" },
        { categoryType: "2", name: "政策" },
        { categoryType: "3", name: "资助及优惠" },
        { categoryType: "4", name: "对接及联络" },
        { categoryType: "5", name: "商务支援" },
        { categoryType: "6", name: "活动及培训" },
        { categoryType: "7", name: "香港贸发局" }
      ],
      trafficTypeList: [
        { trafficType: "1", name: "航班查询" },
        { trafficType: "2", name: "铁路查询" },
        { trafficType: "3", name: "船期查询" },
        { trafficType: "4", name: "巴士查询" },
        { trafficType: "5", name: "口岸查询" }
      ]
    };
  },
  methods: {
    // 上传视频
    async handleChange({ file }) {
      if (file.status === "done") {
        this.$message.success(`${file.name} file uploaded successfully`);
      } else if (file.status === "error") {
        this.$message.error(`${file.name} file upload failed.`);
      }
      var formData = new FormData();
      formData.append("files", file);
      formData.append("type", "");
      console.log(formData);
      api.uploadVideo(formData).then(res => {
        if (res.code == 200) {
          this.videoUrl = res.result;
          this.$message.success("上传成功");
        }
      });
    },
    handleRemove(file) {
      this.$refs.upload.clearFiles();
    },
    handleRemoveImg(file) {
      const index = this.fileList.indexOf(file);
      const newFileList = this.fileList.slice();
      newFileList.splice(index, 1);
      this.fileList = newFileList;
    },
    detailSave() {
      e.preventDefault();
      this.visibleDetail = false;
      this.clearData();
    },
    changType(val) {
      this.key = val;
    },
    changPosterType(val) {
      if (val == 4) {
        this.isArticle = val;
      } else {
        this.isArticle = 0;
      }
      if (val == 8) {
        this.isTraffic = val;
      } else {
        this.isTraffic = 0;
      }
    },
    beforeUpload(file) {
      console.log("头像file", file);
      const isJpgOrPng =
        file.type === "image/jpg" ||
        file.type === "image/jpeg" ||
        file.type === "image/png";
      if (!isJpgOrPng) {
        this.$message.error("只能上传jpg/png的图片哦");
        return;
      }
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.error("图片最大只能上传2MB");
        return;
      }
      this.getImg(file);
      return false;
    },
    getImg(v) {
      var reader = new FileReader();
      var newUrl;
      reader.onload = s => {
        var _this = this;
        newUrl = reader.result;
        let obj = {
          url: newUrl,
          name: v.name
        };
        v.url = newUrl;
        _this.fileList = [...this.fileList, v];
      };
      reader.readAsDataURL(v);
    },
    async previewImages(file) {
      if (!file.url && !file.preview) {
        file.preview = await getBase64(file.originFileObj);
      }
      this.previewImage = file.url || file.preview;
      this.previewVisible = true;
    },
    add(item) {
      this.formData = this.$form.createForm(this, {
        name: "dynamic_rule"
      });
      this.visibleAdd = true;
      this.clearData();
      //修改
      if (item) {
        if (item.posterId) {
          this.posterId = item.posterId;
          this.posterName = item.posterName;
          this.posterType = item.posterType;
          this.remark = item.remark;
          this.language = item.language;
          this.link = item.link;
          this.showType = item.showType;
          this.categoryType = item.categoryType;
          this.trafficType = item.trafficType;
          if (item.showType == 2) {
            this.key = "";
            this.link = "";
          } else {
            this.key = 1;
          }
          if (item.posterType == 4) {
            this.isArticle = item.categoryType;
          }
          if (item.posterType == 8) {
            this.isTraffic = item.trafficType;
            console.log(this.isTraffic, "traffic");
          }
        }
      }
    },
    save(e) {
      e.preventDefault();
      this.formData.validateFields((err, values) => {
        if (!err) {
          let _param = new FormData();
          _param.append("posterName", values.posterName);
          _param.append("posterType", values.posterType);
          _param.append("remark", values.remark);
          _param.append("showType", values.showType);
          _param.append("language", values.language);
          _param.append("url", this.videoUrl);
          if (values.showType == 1) {
            if (values.fileList.file) {
              _param.append("file", values.fileList.file);
            }
          }

          if (values.showType == 2) {
            _param.append("link", "");
          } else {
            _param.append("link", values.link);
          }
          if (values.posterType == 4) {
            _param.append("categoryType", values.categoryType);
          } else {
            _param.append("categoryType", "");
          }
          if (values.posterType == 8) {
            _param.append("trafficType", values.trafficType);
          } else {
            _param.append("trafficType", "");
          }
          if (this.posterId != "") {
            _param.append("posterId", this.posterId);
          }
          this.confirmLoading = true;
          api.savePoster(_param).then(res => {
            if (res.code == 200) {
              this.visibleAdd = false;
              this.$message.success("保存成功");
              this.clearData();
              // this.reload();
              this.getPlan();
            } else {
              this.$message.info(res.description);
            }
            this.confirmLoading = false;
          });
        }
      });
    },
    checkDdetail(item) {
      this.formData = this.$form.createForm(this, {
        name: "dynamic_rule"
      });
      this.visibleDetail = true;
      this.clearData();
      api.getPoster({ posterId: item.posterId }).then(res => {
        if (res.code == 200) {
          this.posterId = res.result.posterId;
          this.posterName = res.result.posterName;
          this.pic = res.result.pic;
          this.videoUrl = res.result.url;
          this.showType = res.result.showType;
          this.language = res.result.language;
          this.link = res.result.link;
          this.remark = res.result.remark;
          this.posterType = res.result.posterType;
          this.imageUrl = this.showHOST + res.result.pic;
          this.categoryType = res.result.categoryType;
          this.trafficType = res.result.trafficType;
        }
      });
    },
    clearData() {
      (this.posterName = ""),
        (this.remark = ""),
        (this.posterType = ""),
        (this.showType = "");
      this.pic = "";
      this.trafficType = "";
      this.url = "";
      this.link = "";
      this.imageUrl = "";
      this.language = "";
      this.videoUrl = "";
      this.fileList = [];
      this.posterId = "";
      this.isArticle = 0;
      this.isTraffic = 0;
    },
    cancel(e) {
      this.$message.error("取消!");
    },
    // 页码
    handleTableChange(pagination, filters, sorter) {
      console.log(pagination);
      this.pagination.current = pagination.current;
      this.getPlan();
    },
    search() {
      this.visibleSearch = true;
    },
    handleSearch() {
      this.visibleSearch = false;
      this.pagination.current = 1;
      this.form.language = this.filterOutObj.language;
      this.form.posterType = this.filterOutObj.posterType;
      this.form.categoryType = this.filterOutObj.categoryType;
      this.form.posterName = this.filterOutObj.posterName;
      if (this.filterOutObj.categoryType != "") {
        if (this.filterOutObj.posterType != 4) {
          this.form.categoryType = "";
        }
      }
      this.getPlan();
    },
    getPlan() {
      this.form.page = this.pagination.current;
      api.getPosterPage(this.form).then(res => {
        if (res.code == 200) {
          this.pagination.total = res.result.totalCount;
          this.dataTable = res.result.content;
        }
      });
    },
    editClass(row) {
      this.$router.push({ path: "addAdvertising", query: { params: row } });
    },
    delPlan(row) {
      this.pagination.current = 1;
      api.delPoster({ ids: row.posterId }).then(res => {
        if (res.code == 200) {
          this.getPlan();
        }
      });
    }
  },
  created() {
    this.getPlan();
    this.key = 1;
  }
};
</script>

<style lang="scss" scoped="" type="text/css">
.editable-row-operations a {
  margin-right: 8px;
}
.top-btn {
  padding: 10px;
}
.code-img {
  display: block;
  width: 150px;
}
.active {
  display: none;
}
/deep/ .w-e-text {
  min-height: 200px !important;
  max-height: 400px !important;
}
</style>
